<template>
  <div>
    <div class="provider-list">
      <div class="content">
        <div class="container">
          <div class="head">
            <div>
              <span style="font-size: 16px" class="title">供应商信息</span>
              <span class="ml50" style="color: #ff6600">{{
                detail.renzheng?.code == 0 ? "未认证" : "已认证"
              }}</span>
            </div>
            <el-button @click="$router.go(-1)">返回</el-button>
          </div>
          <div class="flex">
            <p>
              <span class="title">供应商名称：</span
              >{{ detail.gongsimingcheng }}
            </p>
            <p class="ml50">
              <span class="title">账号：{{ detail.zhanghao }}</span>
            </p>
            <p class="ml50">
              <span class="title">密码：</span>{{ detail.mima }}
            </p>
            <p class="ml50">
              <span class="title">地址：</span>{{ detail.xiangxidizhi }}
            </p>
          </div>
          <div class="flex">
            <p>
              <span class="title">一级主营业务：</span>{{ detail.zhuyingyewu1 }}
            </p>
          </div>
          <div class="flex">
            <p>
              <span class="title">二级主营业务：</span>{{ detail.zhuyingyewu2 }}
            </p>
          </div>
          <div class="flex">
            <p>
              <span class="title">三级主营业务：</span>{{ detail.zhuyingyewu3 }}
            </p>
          </div>
          <div class="intro-img flex">
            <div
              class="show-box"
              v-for="(item, index) in detail.gongsijieshao"
              :key="index"
            >
              <img v-if="item.fileType != 'mp4'" :src="item.filePath" alt="" />
              <video controls v-else :src="item.filePath"></video>
            </div>
          </div>
          <div class="flex">
            <p>收藏数: {{ detail.shoucangshu }}</p>
          </div>
          <div class="flex">
            <p style="width: 50%">
              <span class="title">备注：</span>{{ detail.beizhu }}
            </p>
          </div>
          <div class="bottom"></div>
        </div>
        <div class="providerTable">
          <el-tabs
            v-model="activeName"
            @tab-click="tabChange"
            class="provider-tabs"
          >
            <el-tab-pane class="principalInfo" label="人员信息" name="1">
              <el-button
                class="addPrincipal"
                type="primary"
                size="large"
                @click="addPrincipal"
                >添加负责人</el-button
              >
              <template v-for="(item, index) in peopleType" :key="index">
                <div class="principal">
                  <span class="title">{{ item.name }}</span>
                  <div class="principalTable">
                    <div
                      class="principal-list"
                      v-for="(person, key) in people[item.value]"
                      :key="key"
                    >
                      <div class="introduction">
                        <div class="avatar">
                          <img
                            v-if="
                              person.zhuanjiazhaopian &&
                              person.zhuanjiazhaopian.length
                            "
                            :src="person.zhuanjiazhaopian[0].filePath"
                            alt=""
                          />
                        </div>
                        <div class="intro-right">
                          <div class="right-head">
                            <span class="title">{{
                              person.zhuanjiamingcheng
                            }}</span>
                            <span class="ml40"
                              >手机：{{ person.lianxifangshi }}</span
                            >
                            <span class="ml40"
                              >邮箱：{{ person.youxiang }}</span
                            >
                          </div>
                          <p class="mt15">{{ person.yewuleixing }}</p>
                        </div>
                      </div>
                      <p class="title mt10">
                        项目业绩：{{ person.xiangmuyeji }}
                      </p>
                      <el-button
                        class="deleteButton"
                        style="min-width: 60px"
                        type="primary"
                        size="small"
                        @click="deletePerson(person)"
                        >删除</el-button
                      >
                    </div>
                  </div>
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane class="achievement" label="业绩信息" name="2">
              <div class="head">
                <div class="left">
                  <el-input
                    placeholder="请输入项目名称"
                    v-model="achievementParams.xiangmumingcheng"
                    style="width: 350px"
                    size="large"
                  >
                    <template #append>
                      <el-button
                        @click="GetAchievementList"
                        style="min-width: 50px"
                        icon="Search"
                      />
                    </template>
                  </el-input>
                  <el-select
                    width="150"
                    show-border
                    class="ml20"
                    v-model="achievementParams.xiangmuleixing"
                    size="large"
                    placeholder="类型"
                    clearable
                    @change="GetAchievementList"
                  >
                    <el-option
                      v-for="item in achievementType"
                      :key="item.dicValue"
                      :label="item.dicLabel"
                      :value="item.dicValue"
                    >
                      {{ item.dicLabel }}
                    </el-option>
                  </el-select>
                </div>
                <div class="right">
                  <el-button
                    type="primary"
                    @click="onOperation({}, 'achievementAdd')"
                    size="large"
                    >添加项目</el-button
                  >
                </div>
              </div>
              <el-table
                border
                :data="achievementList"
                style="width: 100%; margin-top: 40px"
              >
                <el-table-column property="xmNo" label="编号" align="center" />
                <el-table-column
                  property="xiangmumingcheng"
                  label="项目名称"
                  align="center"
                />
                <el-table-column
                  property="chengshi"
                  label="城市（省市区）"
                  align="center"
                />
                <el-table-column
                  property="xiangmuleixing"
                  label="类型"
                  align="center"
                />
                <el-table-column
                  property="xiangmudizhi"
                  label="项目地址"
                  align="center"
                />
                <el-table-column
                  property="zhuangtai"
                  label="项目状态"
                  align="center"
                />
                <el-table-column
                  property="yunyingshang"
                  label="项目运营商"
                  align="center"
                />
                <el-table-column
                  property="xiangmufuzeren"
                  label="项目负责人"
                  align="center"
                />
                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <el-button
                      v-if="check === '1'"
                      style="min-width: auto"
                      link
                      type="primary"
                      size="small"
                      @click.prevent="
                        onOperation(scope.row, 'achievementDetail')
                      "
                      >详情</el-button
                    >
                    <el-button
                      style="min-width: auto"
                      link
                      type="primary"
                      size="small"
                      @click.prevent="
                        onOperation(scope.row, 'achievementDelete')
                      "
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <h-page
                v-if="achievementTotal"
                v-model:curr-page="achievementParams.current"
                :size="achievementParams.size"
                :total="achievementTotal"
                @change="GetAchievementList"
              />
            </el-tab-pane>
            <el-tab-pane class="achievement" label="商品信息" name="3">
              <div class="head">
                <div class="left">
                  <el-input
                    placeholder="请输入商品名称"
                    v-model="goodsParams.chanpinmingcheng"
                    style="width: 350px"
                    size="large"
                  >
                    <template #append>
                      <el-button
                        @click="GetGoodsList"
                        style="min-width: 50px"
                        icon="Search"
                      />
                    </template>
                  </el-input>
                  <el-select
                    v-model="goodsParams.chanpinleixing1"
                    size="large"
                    placeholder="一级分类"
                    clearable
                    class="ml10"
                    @change="changeSelection1"
                    :loading="loading1"
                    style="width: 240px"
                  >
                    <el-option
                      v-for="item in type1"
                      :key="item.dicValue"
                      :label="item.dicLabel"
                      :value="item.dicValue"
                    />
                  </el-select>
                  <el-select
                    v-model="goodsParams.chanpinleixing2"
                    size="large"
                    placeholder="二级分类"
                    clearable
                    @change="changeSelection2"
                    :loading="loading2"
                    style="width: 240px; margin-left: 10px"
                  >
                    <el-option
                      v-for="item in type2"
                      :key="item.dicValue"
                      :label="item.dicLabel"
                      :value="item.dicValue"
                    />
                  </el-select>
                  <el-select
                    v-model="goodsParams.chanpinleixing3"
                    size="large"
                    placeholder="三级分类"
                    clearable
                    @change="changeSelection3"
                    :loading="loading3"
                    style="width: 240px; margin-left: 10px"
                  >
                    <el-option
                      v-for="item in type3"
                      :key="item.dicValue"
                      :label="item.dicLabel"
                      :value="item.dicValue"
                    />
                  </el-select>
                </div>
                <div class="right">
                  <el-button
                    type="primary"
                    @click="onOperation({ gysNo: detail.gysNo }, 'addGoods')"
                    size="large"
                    >创建商品</el-button
                  >
                </div>
              </div>
              <el-table
                border
                :data="goodsList"
                style="width: 100%; margin-top: 40px"
              >
                <el-table-column property="cpNo" label="编号" align="center" />
                <el-table-column
                  width="300"
                  property="chanpinmingcheng"
                  label="商品名称"
                  align="center"
                />
                <el-table-column
                  property="chanpinleixing1"
                  label="一级分类"
                  align="center"
                />
                <el-table-column
                  property="chanpinleixing2"
                  label="二级分类"
                  align="center"
                />
                <el-table-column
                  property="chanpinleixing3"
                  label="三级分类"
                  align="center"
                />
                <el-table-column property="jiage" label="价格" align="center" />
                <el-table-column
                  property="zhuanjiamingcheng"
                  label="专家名称"
                  align="center"
                />
                <el-table-column
                  property="zhuanjialiuyanshu"
                  label="专家留言数"
                  align="center"
                />
                <el-table-column width="80" label="操作" align="center">
                  <template #default="scope">
                    <el-button
                      v-if="check === '1'"
                      style="min-width: auto"
                      link
                      type="primary"
                      size="small"
                      @click.prevent="onOperation(scope.row, 'goodsDetail')"
                      >详情</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <h-page
                v-if="goodsTotal"
                v-model:curr-page="goodsParams.current"
                :size="goodsParams.size"
                :total="goodsTotal"
                @change="GetGoodsList"
              />
            </el-tab-pane>
            <el-tab-pane class="certifyInfo" label="认证信息" name="4">
              <div class="contain" v-if="!loading">
                <div class="top-bottom logo">
                  <span class="title">公司LOGO：</span>
                  <div class="img-box">
                    <img
                      v-for="(item, index) in certificationInfo.gysLogo"
                      :key="index"
                      :src="item.filePath"
                      alt=""
                    />
                  </div>
                </div>
                <div class="top-bottom img">
                  <span class="title">营业执照：</span>
                  <div class="img-box">
                    <img
                      v-for="(item, index) in certificationInfo.yyzhzh"
                      :key="index"
                      :src="item.filePath"
                      alt=""
                    />
                  </div>
                </div>
                <div class="top-bottom img">
                  <span class="title">营业执照及组织代码附件：</span>
                  <div class="img-box">
                    <img
                      v-for="(item, index) in certificationInfo.yyzhzhZzhdm"
                      :key="index"
                      :src="item.filePath"
                      alt=""
                    />
                  </div>
                </div>
                <div class="left-right">
                  <span class="title">社会统一信用代码：</span>
                  <p>{{ certificationInfo.shhtyxydm }}</p>
                </div>
                <div class="left-right">
                  <span class="title">法定代表：</span>
                  <p>{{ certificationInfo.fadingdaibiao }}</p>
                </div>
                <div class="left-right">
                  <span class="title">注册资本：</span>
                  <p>{{ certificationInfo.zhuceziben }}万</p>
                </div>
                <div class="left-right">
                  <span class="title">成立日期：</span>
                  <p>{{ certificationInfo.chengliriqi }}</p>
                </div>
                <div class="left-right">
                  <span class="title">营业期限：</span>
                  <p>{{ certificationInfo.yingyeqixian }}</p>
                </div>
                <div class="left-right">
                  <span class="title">银行信用：</span>
                  <p>{{ certificationInfo.yinhangxinyong }}</p>
                </div>
                <div class="left-right normal">
                  <span class="title">经营范围：</span>
                  <p style="max-width: 500px">
                    {{ certificationInfo.jingyingfanwei }}
                  </p>
                </div>
                <div class="left-right">
                  <span class="title">是否上市：</span>
                  <p>
                    {{ certificationInfo.shangshi.code == 0 ? "否" : "是" }}
                  </p>
                </div>
                <div class="left-right">
                  <span class="title">上市地址：</span>
                  <p>{{ certificationInfo.shangshidizhi }}</p>
                </div>
                <div class="left-right">
                  <span class="title">股票代码：</span>
                  <p>{{ certificationInfo.gupiaodaima }}</p>
                </div>
                <div class="left-right">
                  <span class="title">经营品牌：</span>
                  <p>{{ certificationInfo.jingyingpinpai }}</p>
                </div>
                <div class="left-right">
                  <span class="title">办公城市：</span>
                  <p>{{ certificationInfo.bangongdizhi }}</p>
                </div>
              </div>
              <div
                v-if="$route.query.shenhe == 0 && check === '1'"
                class="operation flex-a"
              >
                <el-button @click="review(1)" size="large">通过</el-button>
                <el-button @click="review(-1)" size="large" type="primary"
                  >不通过</el-button
                >
              </div>
              <el-dialog
                class="list-dialog"
                show-close="false"
                width="40%"
                v-model="show"
                center
                style="padding: 0 30px"
              >
                <el-form :model="form" :rules="rules" ref="formRef">
                  <el-form-item label="不通过原因：" prop="note">
                    <el-input
                      v-model="form.shenheBeizhu"
                      :maxlength="150"
                      type="textarea"
                      :rows="8"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <el-form-item class="note-button-group">
                  <el-button size="large" @click="show = false">取消</el-button>
                  <el-button
                    class="ml50"
                    size="large"
                    type="primary"
                    @click="submitForm(formRef)"
                  >
                    提交
                  </el-button>
                </el-form-item>
              </el-dialog>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  GetDetailProvider,
  GetProviderCertification,
  GetProviderPeople,
  ReviewProvider,
  DeleteProviderPeople,
  GetProviderAchievement,
  DeleteProviderAchievement,
  GetProviderGoods,
} from "@/api/provider";
import { baseMsg, elMessageTip } from "@/utils/utils";
import { GetDictionary, GetDictionaryTree } from "@/api/system";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const formRef = ref(null);
    const state = reactive({
      rules: {
        note: [
          {
            require: true,
            message: "请输入不通过原因",
            trigger: "blur",
          },
        ],
      },
      // 详情信息
      detail: {},
      // 认证信息
      certificationInfo: {},
      activeName: "1",
      typeOption: {},
      loading: true,
      show: false,
      check: localStorage.getItem("check"),
      // 审核表单
      form: {
        gysNo: "",
        id: "",
        shenheBeizhu: "",
        shenhe: null,
      },
      // 人员管理详情
      people: {},
      // 人员管理类型
      peopleType: [
        {
          name: "业务第一负责人：",
          value: "gongyingshangfuzerenleixing_yewudiyifuzeren",
        },
        {
          name: "技术第一负责人：",
          value: "gongyingshangfuzerenleixing_jishudiyifuzeren",
        },
        {
          name: "经营联系人：",
          value: "gongyingshangfuzerenleixing_jingyinglianxiren",
        },
      ],

      // 业绩信息相关参数
      achievementParams: {
        current: 1,
        size: 10,
        gysNo: "",
        xiangmumingcheng: "",
        xiangmuleixing: "",
      },
      // 项目类型下拉
      achievementType: [],
      achievementList: [],
      achievementTotal: 0,

      // 商品信息相关参数
      goodsParams: {
        current: 1,
        size: 10,
        gysNo: "",
        chanpinmingcheng: "",
        chanpinleixing1: "",
        chanpinleixing2: "",
        chanpinleixing3: "",
      },
      goodsTotal: 0,
      goodsList: [],
      loading1: true,
      loading2: true,
      loading3: true,
      type1: [],
      type2: [],
      type3: [],
    });
    const GetList = () => {
      GetDetailProvider({
        id: route.query.id || Number(localStorage.getItem("loginId")),
      }).then((res) => {
        if (res.code == 4201) {
          state.detail = res.data;
          GetPeople();
        }
      });
    };
    // 获取人员信息列表
    const GetPeople = () => {
      GetProviderPeople({ gysNo: state.detail.gysNo }).then((res) => {
        if (res.code == 4201) {
          state.people = res.data;
        }
      });
    };
    // 获取业绩信息列表
    const GetAchievementList = () => {
      state.achievementParams.gysNo = state.detail.gysNo;
      GetProviderAchievement(state.achievementParams).then((res) => {
        if (res.code == 4201) {
          state.achievementList = res.data.records;
          state.achievementTotal = res.data.total;
        }
      });
    };

    // 一级分类查询
    const GetType1 = async () => {
      state.loading1 = true;
      const res = await GetDictionaryTree({
        dicModel: "gongyingshangpinzhuanjialeixing",
      });
      if (res.code == 4201) {
        state.type1 = res.data;
        state.loading1 = false;
      } else {
        state.loading1 = false;
      }
    };
    // 查询二级分类
    const GetType2 = (val) => {
      state.loading2 = true;
      state.type2 = [];
      if (state.goodsParams.chanpinleixing1) {
        GetDictionary({ dicId: state.goodsParams.chanpinleixing1 }).then(
          (res) => {
            if (res.code == 4201) {
              state.type2 = res.data;
            }
          }
        );
        state.loading2 = false;
      } else {
        state.loading2 = false;
      }
    };
    // 查询三级分类
    const GetType3 = (val) => {
      state.loading3 = true;
      state.type3 = [];
      if (state.goodsParams.chanpinleixing2) {
        GetDictionary({ dicId: state.goodsParams.chanpinleixing2 }).then(
          (res) => {
            if (res.code == 4201) {
              state.type3 = res.data;
            }
          }
        );
        state.loading3 = false;
      } else {
        state.loading3 = false;
      }
    };
    // 商品分类选中值改变
    const changeSelection1 = () => {
      state.type2 = [];
      state.type3 = [];
      state.goodsParams.chanpinleixing2 = "";
      state.goodsParams.chanpinleixing3 = "";
      GetGoodsList();
      GetType2();
    };
    const changeSelection2 = () => {
      state.type3 = [];
      state.goodsParams.chanpinleixing3 = "";
      GetGoodsList();
      GetType3();
    };
    const changeSelection3 = () => {
      GetGoodsList();
    };
    // 获取商品信息列表
    const GetGoodsList = () => {
      state.goodsParams.gysNo = state.detail.gysNo;
      GetProviderGoods(state.goodsParams).then((res) => {
        if (res.code == 4201) {
          state.goodsList = res.data.records;
          state.goodsTotal = res.data.total;
        }
      });
    };
    // 获取认证信息
    const GetCertificationInfo = () => {
      state.loading = true;
      GetProviderCertification({ gysNo: state.detail.gysNo }).then((res) => {
        if (res.code == 4201) {
          state.certificationInfo = res.data;
          state.loading = false;
        }
      });
    };
    // 添加负责人
    const addPrincipal = () => {
      router.push({
        path: "/gongyingshang/addPrincipal",
        query: {
          qiye: state.detail.gysNo,
        },
      });
    };
    // 删除负责人
    const deletePerson = (params) => {
      elMessageTip({
        ok() {
          DeleteProviderPeople({
            id: params.id,
          }).then((res) => {
            if (res.code == 4202) {
              baseMsg("删除成功");
              GetPeople();
            }
          });
        },
      });
    };
    // 审核通过/不通过
    const review = (status) => {
      state.form.id = state.detail.id;
      state.form.shenhe = status;
      state.form.gysNo = state.certificationInfo.gysNo;
      if (status === -1) {
        state.show = true;
      } else {
        ReviewProvider(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("操作成功");
            router.go(-1);
          }
        });
      }
    };
    // 审核不通过原因提交
    const submitForm = async (formEl) => {
      if (!formEl) return;
      await formEl.validate(async (valid, fields) => {
        if (valid) {
          if (!state.form.shenheBeizhu) {
            baseMsg("请输入不通过原因", false);
          } else {
            ReviewProvider(state.form).then((res) => {
              if (res.code == 4202) {
                baseMsg("操作成功");
                router.go(-1);
              }
            });
          }
        } else {
          return;
        }
      });
    };
    // 操作
    const onOperation = (params, operation) => {
      // 2 添加项目
      if (operation === "achievementAdd") {
        router.push({
          path: "/gongyingshang/addProject",
          query: {
            gysNo: state.detail.gysNo,
          },
        });
      }
      // 2 删除项目
      if (operation === "achievementDelete") {
        elMessageTip({
          ok() {
            DeleteProviderAchievement({
              id: params.id,
            }).then((res) => {
              if (res.code == 4202) {
                baseMsg("删除成功");
                GetAchievementList();
              }
            });
          },
        });
      }
      // 2 项目详情
      if (operation === "achievementDetail") {
        router.push({
          path: `/xiangmu/detail`,
          query: {
            id: params.xmId,
          },
        });
      }
      // 3 添加商品
      if (operation === "addGoods") {
        router.push({
          path: `/chanpin/info`,
          query: {
            type: operation,
            gysNo: params.gysNo,
          },
        });
      }
      // 3 商品详情
      if (operation === "goodsDetail") {
        router.push({
          path: `/chanpin/detail`,
          query: {
            id: params.id,
          },
        });
      }
    };
    const tabChange = (item) => {
      if (item.props.name == "1") {
        GetPeople();
      }
      if (item.props.name == "2") {
        GetAchievementList();
        // 获取项目类型下拉
        GetDictionaryTree({ dicModel: "xiangmuleixing" }).then((res) => {
          if (res.code == 4201) {
            state.achievementType = res.data;
          }
        });
      }
      if (item.props.name == "3") {
        GetGoodsList();
        GetType1();
      }
      if (item.props.name == "4") {
        GetCertificationInfo();
      }
    };
    watch(
      () => route.query,
      () => {
        state.achievementParams.current = Number(route.query.page) || 1;
        state.goodsParams.current = Number(route.query.page) || 1;
        GetAchievementList();
        GetGoodsList();
      },
      { deep: true }
    );
    GetList();
    return {
      ...toRefs(state),
      GetList,
      tabChange,
      GetCertificationInfo,
      review,
      submitForm,
      addPrincipal,
      deletePerson,
      GetAchievementList,
      onOperation,
      GetGoodsList,
      GetType1,
      GetType2,
      GetType3,
      changeSelection1,
      changeSelection2,
      changeSelection3,
      formRef,
    };
  },
});
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
  .container {
    padding: 50px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
    }
  }
}
.title {
  font-weight: bold;
  color: #000;
  font-size: 12px;
}
.flex {
  display: flex;
  margin-bottom: 30px;
}
.intro-img {
  .show-box {
    &:not(:first-child) {
      margin-left: 20px;
    }
    img,
    video {
      width: 140px;
      height: 80px;
      border-radius: 4px;
    }
  }
}
p {
  font-size: 12px;
  color: #333333;
}
.bottom {
  background-color: #ccc;
  height: 1px;
}
.providerTable {
  padding: 0px 50px 50px 50px;
}
.principalInfo {
  position: relative;
  .addPrincipal {
    position: absolute;
    right: 50px;
    top: -20px;
  }
  .principal {
    margin-top: 30px;
    .principalTable {
      margin-top: 15px;
      margin-bottom: 30px;
      border-radius: 6px;
      padding: 0 40px 0 15px;
      border: 1px solid #ccc;
      .principal-list {
        &:not(:last-child) {
          border-bottom: 1px solid #ccc;
        }
        position: relative;
        padding: 20px 0;
        .introduction {
          display: flex;
          .avatar {
            img {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              background-color: #ccc;
            }
          }
          .intro-right {
            margin-left: 10px;
            font-size: 12px;
          }
        }
        .deleteButton {
          position: absolute;
          right: 40px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}
.achievement {
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.certifyInfo {
  .contain {
    & > div {
      margin-top: 40px;
      display: flex;
      p {
        margin-left: 2px;
      }
      &.top-bottom {
        &.logo {
          flex-direction: column;
          img {
            margin-top: 20px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
          }
        }
        &.img {
          flex-direction: column;
          img {
            margin-top: 20px;
            width: 120px;
            height: 70px;
            border-radius: 2px;
            &:not(:first-child) {
              margin-left: 20px;
            }
          }
        }
      }
      &.left-right {
        align-items: center;
        &.normal {
          align-items: baseline;
        }
      }
    }
  }
}
.operation {
  width: 500px;
  margin-top: 100px;
}
</style>
<style lang="scss">
.el-tabs__nav-wrap {
  &::after {
    display: none;
  }
}
.providerTable .el-table__header th {
  background-color: #f2f9fc !important;
}
.note-button-group {
  .el-form-item__content {
    justify-content: center;
  }
}
</style>
